﻿@{
    ViewBag.Title = "瀼渡水电厂";
}

@section head{
    <link rel="stylesheet" href="~/Content/CSS/Index.css?v=18101402" media="all">

}

<div class="info message">
    <h2 class="padtext">信息</h2>
    <p>This is just an info notification message.</p>
</div>

<div class="error message">
    <h2 class="padtext">错误</h2>
    <p>This is just an error notification message.</p>

</div>

<div class="warning message">
    <h2 class="padtext">警告</h2>
    <p>This is just a warning notification message.</p>
</div>

<div class="success message">
    <h2 class="padtext">正常</h2>
    <p>This is just a success notification message.</p>

</div>


<div class="BGDiv">
    @*4T*@
    <div class="elementK" style="top:27%;left:7.4%;">
        <img id="K3041" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="top:33%;left:13.1%;">
        <img id="K30410" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="top:34%;left:7.4%;">
        <img id="B4T" src="~/Content/IMG/5.png" />
    </div>
    <div class="elementK" style="top:56%;left:7.3%;">
        <img id="K0044" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="top:63%;left:6.5%;">
        <img id="Y004" src="~/Content/IMG/8.png" />
    </div>

    <div class="DataPad" style="top:56%;left:1%;">
        <div class="DataPad_P">P=<span id="T4_P">0000.0</span></div>
        <div class="DataPad_Q">Q=<span id="T4_Q">0000.0</span></div>
        <div class="DataPad_Uab">Uab=<span id="T4_Uab">000.0</span></div>
        <div class="DataPad_Ia">If励磁:<span id="T4_If">000.0</span></div>
        <div class="DataPad_Cos">Cos:<span id="T4_Cos">0.00</span></div>
    </div>

    <div class="DataXG" style="top:86%;left:17%;">
        <span id="T4_XG">000.00</span>%
    </div>


    @*2T*@
    <div class="elementK" style="position:absolute;top:27%;left:32.6%;">
        <img id="K3021" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:33.5%;left:38.3%;">
        <img id="K30210" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:33.5%;left:32.6%;">
        <img id="B2T" src="~/Content/IMG/5.png" />
    </div>
    <div class="elementK" style="position:absolute;top:56.5%;left:32.5%;">
        <img id="K0024" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:63.5%;left:31.7%;">
        <img id="Y002" src="~/Content/IMG/8.png" />
    </div>

    <div class="DataPad" style="top:56%;left:36%;">
        <div class="DataPad_P">P=<span id="T2_P">0000.0</span></div>
        <div class="DataPad_Q">Q=<span id="T2_Q">0000.0</span></div>
        <div class="DataPad_Uab">Uab=<span id="T2_Uab">000.0</span></div>
        <div class="DataPad_Ia">If励磁:<span id="T2_If">000.0</span></div>
        <div class="DataPad_Cos">Cos:<span id="T2_Cos">0.00</span></div>
    </div>

    <div class="DataXG" style="top:86.5%;left:42%;">
        <span id="T2_XG">000.00</span>%
    </div>


    @*1T*@
    <div class="elementK" style="position:absolute;top:27%;left:56.9%;">
        <img id="K3011" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:33.5%;left:62.5%;">
        <img id="K30110" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:33.5%;left:56.8%;">
        <img id="B1T" src="~/Content/IMG/5.png" />
    </div>
    <div class="elementK" style="position:absolute;top:56.5%;left:56.8%;">
        <img id="K0014" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:63.5%;left:56%;">
        <img id="Y001" src="~/Content/IMG/8.png" />
    </div>

    <div class="DataPad" style="top:56%;left:48%;">
        <div class="DataPad_P">P=<span id="T1_P">0000.0</span></div>
        <div class="DataPad_Q">Q=<span id="T1_Q">0000.0</span></div>
        <div class="DataPad_Uab">Uab=<span id="T1_Uab">000.0</span></div>
        <div class="DataPad_Ia">If励磁:<span id="T1_If">000.0</span></div>
        <div class="DataPad_Cos">Cos:<span id="T1_Cos">0.00</span></div>
    </div>

    <div class="DataXG" style="top:86.8%;left:66%;">
        <span id="T1_XG">000.00</span>%
    </div>
    <div class="DataXG" style="top:89.8%;left:66%;">
        <span id="T1_Rmin">000.00</span>%
    </div>



    @*3T*@
    <div class="elementK" style="position:absolute;top:29%;left:78%;">
        <img id="K3031" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:34.7%;left:83.7%;">
        <img id="K30310" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:34.7%;left:78%;">
        <img id="B3T" src="~/Content/IMG/5.png" />
    </div>
    <div class="elementK" style="position:absolute;top:56.5%;left:78.1%;">
        <img id="K0034" src="~/Content/IMG/2.png" />
    </div>
    <div class="elementK" style="position:absolute;top:62.5%;left:77.4%;">
        <img id="Y003" src="~/Content/IMG/8.png" />
    </div>

    <div class="DataPad" style="top:56%;left:71%;">
        <div class="DataPad_P">P=<span id="T3_P">0000.0</span></div>
        <div class="DataPad_Q">Q=<span id="T3_Q">0000.0</span></div>
        <div class="DataPad_Uab">Uab=<span id="T3_Uab">000.0</span></div>
        <div class="DataPad_Ia">If励磁:<span id="T3_If">000.0</span></div>
        <div class="DataPad_Cos">Cos:<span id="T3_Cos">0.00</span></div>
    </div>

    <div class="DataXG" style="top:87.5%;left:87%;">
        <span id="T3_XG">000.00</span>%
    </div>

    @*SW*@
    <div class="DataLHSW" style="top:95%;left:17%;">
        <span id="LHSW">0.000</span>M
    </div>

    <div class="DataSW" style="top:94%;left:42%;">
        <span id="XC_QCSW">0.000</span>M
    </div>
    <div class="DataSW" style="top:94%;left:55%;">
        <span id="XC_JSJSW">0.000</span>M
    </div>

    <div class="DataSW" style="top:94%;left:80%;">
        <span id="JC_QCSW">0.000</span>M
    </div>
    <div class="DataSW" style="top:94%;left:93%;">
        <span id="JC_JSJSW">0.000</span>M
    </div>

</div>
@*<ul id="trigger-list">
    <li><a href="#" class="trigger info-trigger">信息</a></li>
    <li><a href="#" class="trigger error-trigger">错误</a></li>
    <li><a href="#" class="trigger warning-trigger">警告</a></li>
    <li><a href="#" class="trigger success-trigger">成功</a></li>
</ul>*@

<div class="msgbtn" onclick="showPad()">
    消息列表
</div>
<div class="msgcontainer" style="overflow-y:auto;">
    <div>
        <div style="width:100%;height:30px;margin-top:10px;cursor:pointer;">
            <div style="float:left;width:50%;height:100%;text-align:center;background-color:cadetblue;font-size:20px;" onclick="clearAll()">处理全部</div>
            <div style="float:left;width:50%;height:100%;text-align:center;background-color:aliceblue;font-size:20px;" onclick="closepad()">关闭</div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function getRandom(start, end) {
        var length = end - start + 1;
        var num = parseInt(Math.random() * (length) + start);
        return num;
    }
    function SwitchImg() {
        var temp = 0;
        temp = getRandom(1, 3);
        $("#K3021").attr("src", "/Content/IMG/" + temp + ".png");
        temp = getRandom(1, 3);
        $("#K30210").attr("src", "/Content/IMG/" + temp + ".png");
        temp = getRandom(4, 6);
        $("#B2T").attr("src", "/Content/IMG/" + temp + ".png");
        temp = getRandom(1, 3);
        $("#K0024").attr("src", "/Content/IMG/" + temp + ".png");
        temp = getRandom(7, 9);
        $("#Y002").attr("src", "/Content/IMG/" + temp + ".png");

    }


    function fillItem(result) {
        if (result.length === 0) {
            alert("error on getData");
            return;
        }
        for (var j = 0; j < result.length; j++) {
            var i = result[j];
            $("#" + i.DeviceName + "_P").text((i.P).toFixed(2) + "");
            $("#" + i.DeviceName + "_Q").text((i.Q).toFixed(2) + "");
            $("#" + i.DeviceName + "_Uab").text((i.Uab).toFixed(2) + "");
            $("#" + i.DeviceName + "_If").text((i.Iflc).toFixed(2) + "");
            var temp = 0;
            temp = i.P / Math.sqrt(i.P * i.P + i.Q * i.Q);
            $("#" + i.DeviceName + "_Cos").text(temp.toFixed(2) + "");
            $("#" + i.DeviceName + "_XG").text((i.KD).toFixed(2) + "");
            $("#" + i.DeviceName + "_Rmin").text((i.ZS).toFixed(2) + "r/min");
        }



    }
    function getData() {
        ii = ii + 1;

        
        if (ii > endNum) {
            endNum = getRandom(1, 50);            
            ii = 0;
            var type = getRandom(0, 3);
            var msg = MessageArray[getRandom(0, MessageArray.length)];
            showMyMessage(myMessages[type], msg);
        
            var temphtml = "";
            temphtml = '<div class="padelement">' +
                '    <div class="' + myMessages[type]+'pad messageEle">' +
                '        <div>';
            switch (myMessages[type])
            {
                case "info":
                    temphtml = temphtml + '<p style="font-size:20px;font-weight:700;">信息</p>';
                    break;
                case "warning":
                    temphtml = temphtml + '<p style="font-size:20px;font-weight:700;">警告</p>';
                    break;
                case "error":
                    temphtml = temphtml + '<p style="font-size:20px;font-weight:700;">错误</p>';
                    break;
                case "success":
                    temphtml = temphtml + '<p style="font-size:20px;font-weight:700;">正常</p>';
                    break;
            }
            temphtml = temphtml + '<p>' + msg + '</p>' +
                '</div>' +
                '<div style="text-align:center;background-color:cadetblue;cursor:pointer;" onclick="closeelement(this)">处理</div>' +
                '</div>' +
                '</div>';
            var temp = $(temphtml);
            $(".msgcontainer").prepend(temp);
        }
        //<div class="padelement">
        //    <div class="errorpad messageEle">
        //        <div>
        //            <p style="font-size:20px;font-weight:700;">信息</p>
        //            <p>This is just an info notification message.</p>
        //        </div>
        //        <div style="text-align:center;background-color:cadetblue;cursor:pointer;" onclick="closeelement(this)">
        //            处理
        //        </div>
        //    </div>
        //</div>



        $.get({
            url: "/Home/API_GetData?r=" + Math.random(),
            async: false,
            success: function (result) {
                console.log("Sample log");
                fillItem(result);
                SwitchImg();
            }
        });
        $.get({
            url: "/Home/API_GetRiverData?r=" + Math.random(),
            async: false,
            success: function (result) {
                $("#LHSW").text((result[0].SBZ).toFixed(3) + "");
                $("#XC_QCSW").text((result[0].XCQC).toFixed(3) + "");
                $("#XC_JSJSW").text((result[0].XCJSJ).toFixed(3) + "");
                $("#JC_QCSW").text((result[0].JCQC).toFixed(3) + "");
                $("#JC_JSJSW").text((result[0].JCJSJ).toFixed(3) + "");
            }
        });
    }


    var myMessages = ['info', 'warning', 'error', 'success']; // define the messages types
    var MessageJson = JSON.parse('@Html.Raw(ViewBag.MessageList)');
    var MessageArray = [];
    for (var i = 0; i < MessageJson.length; i++) {
        MessageArray.push(MessageJson[i].content);
    }
    var ii = 0;
    var endNum = getRandom(1, 50);
    $(document).ready(function () {
        setInterval('getData()', 2000);

        $(".msgcontainer").css("display", "none");
        hideAllMessages();
        $('.message').click(function () {
            $(this).animate({ top: -$(this).outerHeight() }, 500);
        });


    });


    function hideAllMessages() {
        var messagesHeights = new Array(); // this array will store height for each
        for (i = 0; i < myMessages.length; i++) {
            messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
            $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
        }
    }

    function showMessage(type,mytext) {
        $('.' + type + '-trigger').click(function () {
            hideAllMessages();
            $("." + type + ">p").text(mytext);
            $('.' + type).animate({ top: "0" }, 500);
        });
    }

    function showMyMessage(type, myText) {
        hideAllMessages();
        $("." + type + ">p").text(myText);
        $('.' + type).animate({ top: "0" }, 500);
    }

    function showPad() {
        $(".msgcontainer").fadeIn();
        $(".msgbtn").css("display", "none");
        //msgbtn
    }

    function closepad() {
        $(".msgcontainer").css("display", "none");
        $(".msgbtn").css("display", "block");
    }
    function closeelement(obj) {
        $(obj).parent().parent(".padelement").remove();
    }

    function clearAll() {
        $(".padelement").remove();
    }


</script>